import React from 'react';
import { StyleSheet, View, TouchableOpacity, ScrollView, FlatList } from 'react-native';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import { useRouter } from 'expo-router';

import { ThemedText } from '@/components/ThemedText';
import { ThemedView } from '@/components/ThemedView';
import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';

// 模拟活动数据
const ACTIVITIES = [
  {
    id: '1',
    title: '太极拳晨练',
    date: '2023-10-15',
    time: '08:00 - 09:30',
    location: '中央公园',
    participants: 12,
    status: 'upcoming', // upcoming, ongoing, past
  },
  {
    id: '2',
    title: '社区棋牌比赛',
    date: '2023-10-20',
    time: '14:00 - 17:00',
    location: '社区活动中心',
    participants: 24,
    status: 'upcoming',
  },
  {
    id: '3',
    title: '园艺分享会',
    date: '2023-10-10',
    time: '15:30 - 17:00',
    location: '社区花园',
    participants: 8,
    status: 'past',
  },
  {
    id: '4',
    title: '摄影技巧讲座',
    date: '2023-10-05',
    time: '10:00 - 11:30',
    location: '文化中心',
    participants: 15,
    status: 'past',
  },
];

export default function ActivitiesScreen() {
  const colorScheme = useColorScheme();
  const tintColor = Colors[colorScheme ?? 'light'].tint;
  const router = useRouter();

  const renderActivityItem = ({ item }) => {
    // 根据活动状态设置不同的颜色
    let statusColor = '#0a7ea4'; // 默认颜色
    let statusText = '即将开始';
    
    if (item.status === 'ongoing') {
      statusColor = '#4CAF50';
      statusText = '进行中';
    } else if (item.status === 'past') {
      statusColor = '#9E9E9E';
      statusText = '已结束';
    }

    return (
      <TouchableOpacity 
        style={styles.activityItem}
        onPress={() => console.log(`查看活动详情: ${item.title}`)}
      >
        <View style={styles.activityHeader}>
          <ThemedText style={styles.activityTitle}>{item.title}</ThemedText>
          <View style={[styles.statusBadge, { backgroundColor: statusColor }]}>
            <ThemedText style={styles.statusText}>{statusText}</ThemedText>
          </View>
        </View>
        
        <View style={styles.activityDetails}>
          <View style={styles.detailItem}>
            <MaterialCommunityIcons name="calendar" size={18} color={tintColor} style={styles.detailIcon} />
            <ThemedText style={styles.detailText}>{item.date}</ThemedText>
          </View>
          
          <View style={styles.detailItem}>
            <MaterialCommunityIcons name="clock-outline" size={18} color={tintColor} style={styles.detailIcon} />
            <ThemedText style={styles.detailText}>{item.time}</ThemedText>
          </View>
          
          <View style={styles.detailItem}>
            <MaterialCommunityIcons name="map-marker" size={18} color={tintColor} style={styles.detailIcon} />
            <ThemedText style={styles.detailText}>{item.location}</ThemedText>
          </View>
          
          <View style={styles.detailItem}>
            <MaterialCommunityIcons name="account-group" size={18} color={tintColor} style={styles.detailIcon} />
            <ThemedText style={styles.detailText}>{item.participants} 人参与</ThemedText>
          </View>
        </View>
      </TouchableOpacity>
    );
  };

  return (
    <ThemedView style={styles.container}>
      <View style={styles.header}>
        <TouchableOpacity onPress={() => router.back()} style={styles.backButton}>
          <MaterialCommunityIcons name="arrow-left" size={28} color={tintColor} />
        </TouchableOpacity>
        <ThemedText style={styles.headerTitle}>我的活动</ThemedText>
        <View style={styles.placeholder} />
      </View>
      
      <ScrollView style={styles.scrollView}>
        <View style={styles.filterContainer}>
          <TouchableOpacity style={[styles.filterButton, styles.activeFilter]}>
            <ThemedText style={styles.activeFilterText}>全部</ThemedText>
          </TouchableOpacity>
          <TouchableOpacity style={styles.filterButton}>
            <ThemedText style={styles.filterText}>即将开始</ThemedText>
          </TouchableOpacity>
          <TouchableOpacity style={styles.filterButton}>
            <ThemedText style={styles.filterText}>已结束</ThemedText>
          </TouchableOpacity>
        </View>
        
        <FlatList
          data={ACTIVITIES}
          renderItem={renderActivityItem}
          keyExtractor={item => item.id}
          scrollEnabled={false}
          contentContainerStyle={styles.activitiesList}
        />
      </ScrollView>
    </ThemedView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingTop: 60,
    paddingBottom: 15,
    paddingHorizontal: 20,
    borderBottomWidth: 1,
    borderBottomColor: '#E1E1E1',
  },
  backButton: {
    width: 40,
    height: 40,
    justifyContent: 'center',
    alignItems: 'flex-start',
  },
  headerTitle: {
    fontSize: 22,
    fontWeight: 'bold',
  },
  placeholder: {
    width: 40,
  },
  scrollView: {
    flex: 1,
  },
  filterContainer: {
    flexDirection: 'row',
    padding: 15,
    borderBottomWidth: 1,
    borderBottomColor: '#E1E1E1',
  },
  filterButton: {
    paddingHorizontal: 15,
    paddingVertical: 8,
    borderRadius: 20,
    marginRight: 10,
  },
  activeFilter: {
    backgroundColor: '#0a7ea4',
  },
  filterText: {
    fontSize: 16,
    color: '#666',
  },
  activeFilterText: {
    fontSize: 16,
    color: '#fff',
    fontWeight: '500',
  },
  activitiesList: {
    padding: 15,
  },
  activityItem: {
    backgroundColor: '#f9f9f9',
    borderRadius: 10,
    padding: 15,
    marginBottom: 15,
    borderLeftWidth: 4,
    borderLeftColor: '#0a7ea4',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.1,
    shadowRadius: 2,
    elevation: 2,
  },
  activityHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 10,
  },
  activityTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    flex: 1,
  },
  statusBadge: {
    paddingHorizontal: 10,
    paddingVertical: 5,
    borderRadius: 15,
  },
  statusText: {
    color: '#fff',
    fontSize: 12,
    fontWeight: '500',
  },
  activityDetails: {
    marginTop: 5,
  },
  detailItem: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 8,
  },
  detailIcon: {
    marginRight: 8,
  },
  detailText: {
    fontSize: 16,
    color: '#666',
  },
});